import { CloseOutlined } from "@ant-design/icons"
import { Button, Card } from "antd"
import React, { useCallback } from "react"

import { ModalRef } from "@whzhuke/antd"

export interface FormProps {
  onDone?: (params?: any) => void
}

interface Props {
  title: string
  formEle: React.FC
  formProps?: any
}

export const FormModal = (props: Props & ModalRef<boolean>) => {
  const { modalRef, resolve, formEle: FormEle, formProps = {}, title = "弹窗" } = props

  const closeModal = useCallback(() => {
    modalRef.current?.destroy()
    resolve?.(!1)
  }, [])
  const onDone = useCallback(() => {
    modalRef.current?.destroy()
    resolve?.(!0)
  }, [])

  return (
    <Card
      title={title}
      extra={
        <Button size="small" type="text" onClick={closeModal}>
          <CloseOutlined />
        </Button>
      }
    >
      <FormEle {...formProps} onDone={onDone} />
    </Card>
  )
}
